<script lang="ts" setup name="CallbackPatch">
import Message from '@/components/message'
import { useCountDown } from '@/utils/hooks'
import useStore from '@/store'
import {
  accountRule,
  codeRule,
  mobileRule,
  passwordRule,
  rePasswordRule,
} from '@/utils/validate'
import { useField, useForm } from 'vee-validate'
import { useRouter } from 'vue-router'
import { QQUserInfo, QQUserInfoRes } from '@/types/user'
import { ref } from 'vue'
const { user } = useStore()

let openId = ''
const router = useRouter()
const qqInfo = ref<QQUserInfo>({} as QQUserInfo)
if (QC.Login.check()) {
  QC.api('get_user_info').success((res: QQUserInfoRes) => {
    qqInfo.value = res.data
  })
  QC.Login.getMe((id) => {
    openId = id
  })
}

const { validate } = useForm({
  validationSchema: {
    account: accountRule,
    mobile: mobileRule,
    code: codeRule,
    password: passwordRule,
    rePassword: rePasswordRule,
  },
})
const { value: account, errorMessage: accountError } =
  useField<string>('account')
const {
  value: mobile,
  errorMessage: mobileError,
  validate: validateMobile,
} = useField<string>('mobile')
const { value: code, errorMessage: codeError } = useField<string>('code')
const { value: password, errorMessage: passwordError } =
  useField<string>('password')
const { value: rePassword, errorMessage: rePasswordError } =
  useField<string>('rePassword')
// 点击验证码
const { time, start } = useCountDown(60)
const send = async () => {
  if (time.value > 0) return
  const res = await validateMobile()
  if (!res.valid) return
  await user.sendQQPathMsg(mobile.value)
  Message.success('获取验证码成功')
  // 点击验证码之后再来个倒计时
  // 将倒计时封装在hook.ts中 方便使用
  start()
}
const submit = async () => {
  const res = await validate()
  // console.log(res)
  if (!res.valid) return
   await user.qqPatchLogin(openId,account.value, mobile.value, code.value,password.value)
  Message.success('注册成功')
  router.push('/')
}
</script>
<template>
  <div class="xtx-form">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入用户名"
          v-model="account"
        />
      </div>
      <div class="error" v-if="accountError">
        <i class="iconfont icon-warning" />{{ accountError }}
      </div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入手机号"
          v-model="mobile"
        />
      </div>
      <div class="error" v-if="mobileError">
        <i class="iconfont icon-warning" />{{ mobileError }}
      </div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入验证码"
          v-model="code"
        />
        <span class="code" @click="send">
          {{ time === 0 ? '发送验证码' : `${time}s后发送` }}
        </span>
      </div>
      <div class="error" v-if="codeError">
        <i class="iconfont icon-warning" />{{ codeError }}
      </div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          placeholder="请输入密码"
          v-model="password"
        />
      </div>
      <div class="error" v-if="passwordError">
        <i class="iconfont icon-warning" />{{ passwordError }}
      </div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          placeholder="请确认密码"
          v-model="rePassword"
        />
      </div>
      <div class="error" v-if="rePasswordError">
        <i class="iconfont icon-warning" />{{ rePasswordError }}
      </div>
    </div>
    <a href="javascript:;" class="submit" @click="submit">立即提交</a>
  </div>
</template>

<style scoped lang="less">
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
